<?php
include('../includes/header.php');
?>
<style>
#content, #nav, #contactlinks,#logoImage{
display:none;
}
.logo{
	overflow: hidden; height: 64px; width: 350px;
}

#head_title{
	position: absolute; width: 401px; top:35.5px; display: none;
}
</style>

<script type="text/javascript" src="js/lamo.js"></script>
<script type='text/javascript' src='js/jquery.simplemodal.js'></script>
<script type='text/javascript' src='js/basic.js'></script>
<div class="slider-blk clearfix">
		<?php include('common/sliders.php'); ?>
</div>
          <div class="clear"></div>
          <div class="homecontent">
          <h3>Welcome to Gatic</h3>
          <p>Gatic is internationally renowned for the manufacture and 
supply of innovative gas and air-tight access covers and surface water 
drainage systems to the construction, transport and utility markets. The
 company's worldwide reputation has been established over one hundred 
years of providing quality products and performance on prestigious 
projects across the globe.</p>
          <p class="last">With international offices, production 
facilities and distributors located throughout the world, the Gatic 
range has become the leading global brand for access and surface 
drainage systems.</p>
<?php include 'popup_menu.php'; ?>
</div>
        </div>
        
        <div class="clear"></div>
        <div class="testimonial">
          <div class="blk gray mr40">
            <h3>Latest News</h3>
            <img src="images/blk1.jpg" alt="" height="142" width="176"> </div>
          <div class="blk green">
            <h3>Case studies</h3>
            <img src="images/blk2.jpg" alt="" height="142" width="176"> </div>
          <div class="blk yellow last">
            <h3>Testimonials</h3>
            <img src="images/blk3.jpg" alt="" height="142" width="176"> </div>
        </div>
        <div class="clear"></div>
        
<script>
var scrollerNeedle='';
var animation=5000;
var delayForAnimation = 8000;
var intervalPointer;
function animateScroller()
{		
	scrollerNeedle = (scrollerNeedle == '#mycarousel')?'#mycarousel1':'#mycarousel';
	jQuery(scrollerNeedle).jcarousel('next');		
	//alert('adfterf');
}
$(document).ready(function(){
	var str = 'Specialised Engineering. Special Advice.';
	var word_length = str.length;	
	var i=0;
    $(document).ready(function(){
		$('div.sidebar').css('display','none');
        $('div#head_title').html('');
        $('div#head_title').show();        
    })
	function letter_by_letter_animate()
	{				
	    
		$('<span>' + str[i] + '</span>').fadeIn().css('display','inline').appendTo('div#head_title');
		if(i++ >= word_length) 
		{			
			$('div#head_title').html(str);
			//$('div#head_title').css('width','371px');
			$('div.sidebar').css('display','block');	
			other_logo();
			second_one();
			intervalPointer = setInterval("animateScroller()",delayForAnimation);
			return;
		}
		setTimeout(letter_by_letter_animate,120);				
	}	
	
	
	function other_logo()
	{
	 $('#content, #nav, #contactlinks,#logoImage').fadeIn(2000,function(){
			jQuery('#mycarousel').jcarousel({
				vertical: true,
				scroll: -1,
				auto: 0,
				wrap: 'circular',
				animation:animation
			});		
			
		});
		//setTimeout(second_one,5000);	
	}
	
	function second_one()
	{
		$('#content, #nav, #contactlinks,#logoImage').fadeIn(2000,function(){		
			jQuery('#mycarousel1').jcarousel({
				vertical: true,
				scroll: -1,
				auto: 0,
				wrap: 'circular',
				animation:animation									
			});
		});
	}
	letter_by_letter_animate();
	
	$('.glow').mouseover(function(){
		//console.log('mouseover');
		clearInterval(intervalPointer)
		
		jQuery('#mycarousel').jcarousel('setConfig',{animation:2000});	
		jQuery('#mycarousel1').jcarousel('setConfig',{animation:2000});	
		animateScroller();
		intervalPointer = setInterval("animateScroller();",5000);
		
	});	
	$('.glow').mouseout(function(){
		//console.log('mouseout');
		clearInterval(intervalPointer);
		
		jQuery('#mycarousel').jcarousel('setConfig',{animation:5000});	
		jQuery('#mycarousel1').jcarousel('setConfig',{animation:5000});	
		animateScroller();
		intervalPointer = setInterval("animateScroller();",8000);		
		
	});	

    /**/
})
</script>        
<?php
include('../includes/footer.php');
?>